<template>
	<div class="export-container" v-loading="fullscreenLoading">
		<!-- 第一行 -->
		<div class="nav">
			<div class="tabs-container">
				<el-button @click="excelBtnClick('export')" :type="btnActiveClass ? 'primary' : ''">
					{{ $t("message.userManageView.manageBtnExport") }}
				</el-button>
				<el-button @click="excelBtnClick('import')" :type="!btnActiveClass ? 'primary' : ''">
					{{ $t("message.userManageView.manageBtnImport") }}
				</el-button>
			</div>
			<div :class="radioDisabledTop
				? 'isSelect tabs-container'
				: 'tabs-container'
				" style="border: 1px solid #d3d3d3;">
				<el-radio v-model="rowRadio" :label="2" :disabled="!btnActiveClass" @change="rowRadioChange(2)">{{
					$t("message.userManageView.manageRadioHaven")
				}}</el-radio>
				<el-radio v-model="rowRadio" :label="1" :disabled="!btnActiveClass" @change="rowRadioChange(1)">{{
					$t("message.userManageView.manageRadioBlank")
				}}</el-radio>
			</div>

			<div :class="!btnActiveClass || rowRadio == 2
				? 'row-input active-row-input'
				: 'row-input'
				">
				<span>{{
					$t("message.environmentSetting.export.label_7")
				}}</span>
				<el-input v-model="value" :disabled="!btnActiveClass || rowRadio == 2"
					@input="value = $setMyNum(value, '3 - 0')"></el-input>
				<span>{{
					$t("message.environmentSetting.export.label_8")
				}}</span>

				<el-button type="primary" class="select-btn" @click="onDoItClick">
					{{ $t("message.public.doIt") }}
				</el-button>
			</div>
		</div>

		<!-- <createUserView style="position: absolute;"/> -->

		<!-- 搜索 -->
		<div class="main-content-lay">
			<div class="left-content-lay">
				<!-- search 行 -->
				<div class="left-row">
					<div class="form-search-row">
						<div class="form-row-label seach">
							<i class="el-icon-search" @click="ctgVauleSearch"></i>
						</div>
						<div class="form-row-right-content">
							<el-input v-model="ctgVaule" placeholder="" class="form-ipt"
								@keyup.enter.native="ctgVauleSearch"></el-input>
						</div>
					</div>

					<div class="form-btn-lay">
						<el-button size="mini" style="height: 32px !important;" type="primary" @click="onCreateClick">
							<i class="el-icon-plus"></i>
							<span>{{ $t("message.public.addbtn") }}</span>
						</el-button>
						<el-button size="mini" style="height: 32px !important;width: 32px !important;margin: 0;">
							<i style="transform: translateX(-7px);" class="el-icon-caret-top"
								@click="onArrowTopClick"></i>
						</el-button>
						<el-button size="mini" style="height: 32px !important;width: 32px !important;">
							<i style="transform: translateX(-7px);" class="el-icon-caret-bottom"
								@click="onArrowBottomClick"></i>
						</el-button>
					</div>
				</div>
				<div class="left-table-lay">
					<userTableView ref="userTableView" class="table-view" @onUserSelect="onUserSelect" />
				</div>
			</div>

			<div class="right-content-lay">
				<userEditView :inUserInfo="selectUserInfo" @editUserSuccess="editUserSuccess" />
			</div>
		</div>

		<!-- createUserView -->
		<el-dialog :title="$t('message.userPageTable.userRegistration')" :visible.sync="showCreateDialog" width="30%"
			:append-to-body="true" :close-on-click-modal="false">
			<createUserView ref="createUser" @addUserSuccess="addUserSuccess" @addUserCancel="addUserCancel" />
		</el-dialog>

		<import-dialog v-if="showImportDialog" @CloseImportDiloag="(showImportDialog = false), afterInport()"
			:title="importDialogTitle" :_api="importApi"></import-dialog>
	</div>
</template>

<script>
import { exPortUsers, setUserSort } from "@/api/api";

import userEditView from "./userEditView";
import userTableView from "./userTableView";
import createUserView from "./createUserView";
import ImportDialog from "./ImportDialog.vue";
import { getLocalStorage } from "@/utils/storage";

export default {
	name: "userManageView",
	data() {
		return {
			fullscreenLoading: false,
			value: 30,
			rowRadio: 1,
			ctgVaule: "",
			radioDisabledTop: false,
			btnActiveClass: true,
			rowDisabledIpt: true,
			selectUserInfo: null,

			showCreateDialog: false,

			// 导入
			showImportDialog: false,
			importDialogTitle: this.$t("message.Menu.user"),
			importApi: "/api/User/imPortUsers",
		};
	},
	components: {
		userTableView,
		userEditView,
		createUserView,
		"import-dialog": ImportDialog,
	},
	watch: {},
	methods: {
		onDoItClick() {
			if (!this.btnActiveClass) {
				this.showImportDialog = true;
			} else {
				this.exPortUsersApi();
			}
		},

		exPortUsersApi() {
			this.fullscreenLoading = true;
			exPortUsers({
				userId: getLocalStorage("userID"),
				excuType: this.rowRadio,
				line: Number(this.value),
			})
				.then((res) => {
					if (res.data.code != 0) {
						this.$alert(res.data.msg, '', {
	confirmButtonText: 'OK',
	type: 'warning',
});
						return;
					}
					window.open(res.data.data);
					this.$message.success(res.data.msg);
				})
				.finally(() => {
					this.fullscreenLoading = false;
				});
		},

		setUserSortApi(inFromUserId, inToUserId) {
			setUserSort({
				fromUserId: inFromUserId,
				toUserId: inToUserId,
			}).then((res) => {
				this.$refs.userTableView.afterSort();
			});
		},

		excelBtnClick(type) {
			// 导入
			if (type === "import") {
				this.btnActiveClass = false;
				// this.radioDisabledTop = true;
				// this.rowDisabledIpt = true;
			} else {
				// 导出
				this.btnActiveClass = true;
				// this.radioDisabledTop = false;
				// this.rowDisabledIpt = false;
				this.value = 30;
			}
		},

		//验证输入
		changeInput() {
			var pattern = /^[1-9][0-9]*$/; // 正整数的正则表达式
			// 不符合正整数时
			if (!pattern.test(this.value)) {
				// input 框绑定的内容为空
				this.value = "";
			}
		},

		rowRadioChange(type) {
			console.log(this.rowRadio);
		},

		ctgVauleSearch() {
			this.$refs.userTableView.getUserApi(0, this.ctgVaule);
		},

		/**
		 * 表格里选择一条用户信息
		 */
		onUserSelect(e) {
			this.selectUserInfo = e;
		},

		/**
		 * 创建用户
		 */
		onCreateClick() {
			this.showCreateDialog = true;
			setTimeout(() => {
				this.$refs.createUser.clearInfo();
			}, 300);
		},

		addUserSuccess() {
			this.showCreateDialog = false;
			this.$refs.userTableView.afterCreateUser();
		},

		editUserSuccess() {
			this.$refs.userTableView.afterEditUser();
		},

		addUserCancel() {
			this.showCreateDialog = false;
		},

		afterInport() {
			this.$refs.userTableView.afterCreateUser();
		},

		/**
		 * user順序上移
		 */
		onArrowTopClick() {
			let target = this.$refs.userTableView.getPreItemUserId();
			if (this.selectUserInfo.userId == target)
				return;
			this.setUserSortApi(this.selectUserInfo.userId, target);
		},

		/**
		 * user順序下移
		 */
		onArrowBottomClick() {
			let target = this.$refs.userTableView.getNextItemUserId();
			if (this.selectUserInfo.userId == target)
				return;
			this.setUserSortApi(this.selectUserInfo.userId, target);
		},
	},
	created() { },
	mounted() { },
	beforeDestroy() { },
};
</script>

<style lang="scss" scoped>
.export-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.nav {
	width: 100%;
	height: 32px;
	display: flex;
	align-items: center;
	margin: 16px 0px;

	.tabs-container {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 344px;
		min-height: 32px;
		// border: 1px solid #d3d3d3;
		background: #fff;
		border-radius: 4px;
		margin-right: 24px;

		button {
			width: 50% !important;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			margin: 0;
			border-radius: 0;
		}

		// button:nth-child(2) {
		// 	border-right: 1px solid #d3d3d3;
		// }

		.activeBtn {
			background: #106ebe;
			color: #fff;
		}

		::v-deep .el-radio {
			width: 50%;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
		}
	}

	.isSelect {
		background: #f8f8f8;
	}

	.row-input {
		display: flex;
		align-items: center;
		justify-content: flex-start;

		span {
			color: #333333;
		}

		::v-deep .el-input {
			width: 68px;
			text-align: center;
			height: 32px;
			margin: 0 8px;
		}

		::v-deep .el-input__inner {
			width: 68px;
			text-align: center;
			height: 32px;
		}

		::v-deep .el-input__inner.disabled:hover {
			cursor: pointer;
		}

		.select-btn {
			min-width: 50px;
			height: 24px;
			// background: #106ebe;
			// color: #fff;
			// border: 1px solid #eaeaeb;
			// border-radius: 4px;
			margin-left: 20px;
			cursor: pointer;
		}
	}

	.active-row-input {
		::v-deep .el-input__inner {
			background: rgb(255, 255, 225);
		}
	}
}

.main-content-lay {
	width: 100%;
	height: 100%;
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
}

.left-content-lay {
	width: 65%;
	height: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;

	.left-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.form-search-row {
		width: 40%;
		height: 42px;
		display: flex;
		align-items: center;
		align-content: center;

		.seach {
			width: 24px;
			height: 42px;
			// border-radius: 4px;
			// border: 1px solid #d9d9d9;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;

			color: rgba(0, 0, 0, 0.85);
		}

		.form-row-right-content {
			flex-grow: 1;

			.form-ipt {
				width: 100%;
				height: 24px;

				::v-deep .el-input__inner {
					height: 24px;
					background: none;
					border: 0px;
					border-bottom: 1px solid #d9d9d9;
				}

				::v-deep .el-input__icon {
					line-height: 24px;
				}
			}
		}
	}

	.form-btn-lay {
		button {
			width: 32px;
			height: 32px;
			// background: #ffffff;
			// border: 1px solid #d9d9d9;
			margin-right: 12px;
			// border-radius: 4px;
		}

		button:nth-child(1) {
			width: 72px;
			// background: #106ebe;
			// color: #fff;
		}
	}

	.left-table-lay {
		width: 100%;
		// height: 90%;
		flex-grow: 1;
		flex-shrink: 1;
		border: 1px solid #d3d3d3;

		.table-view {
			width: 100%;
			height: 100%;
		}
	}
}

.right-content-lay {
	width: 32%;
	height: 100%;
	box-sizing: border-box;
}
</style>
